<template>
  <view class="search-container">
   <view v-show="!show">
     <view class="search">
       <input class="inp" placeholder="搜索职位" v-model="keyWord" @input="searchJob"/>
     </view>
     <!-- 展示 -->
     <view class="shift wrap">
       <!-- 左侧工作岗位 -->
       <view class="shift-left">
         <view :class="{ active: true }">平面设计师</view>
         <view :class="{ active: currentIndex }"> 销售总监</view>
         <view :class="{ active: currentIndex }">产品设计</view>
       </view>
       <!-- 右侧筛选 -->
       <view @click="showCondition" class="shift-right">
         <view>筛选</view>
         <img src="../../static/img/组件 221 – 1.png" alt="" />
       </view>
     </view>
     
     <!-- 展示项 -->
     <InfoItem v-for="(item,index) in InfoList" :key="index" :infoItem="item"></InfoItem>
   </view>
    <!-- 抽屉 -->
    <Drawer v-show="show"  @close="cancelDrawer"  :condition="shiftList" @submit="conditionSearch"></Drawer>
  </view>
</template>


<script >
  import InfoItem from '../../components/index/InfoItem.vue'
  import Drawer from '../../components/work/Drawer.vue'
export default {
  name: "",
  components:{InfoItem,Drawer},
  data() {
    return {
      show: false,
      currentIndex: "",
      InfoList:[],
      shiftList: {},
      // 关键词
      keyWord:'',
      // 模拟上啦加载的数据
      fakeData:[{},{},{}]
    };
  },
  methods: {
    // 打开抽屉
    showCondition() {
      this.show = true;
    },
    // 关闭抽屉
    cancelDrawer() {
      this.show = false;
    },
    // 下拉加载操作
  addFake(){
    this.InfoList.push(...this.fakeData)
  },
    // 模糊动态搜索
    searchJob(){
      // 空关键词重新获取数据
      if (this.keyWord == '') {
        uni.request({
          url:'http://139.159.145.212:19001/power/wx/recruit/condition/listPage',
          success: res => {
            this.InfoList = res.data.rows
          }
        })
      }
     // 搜索时更新数组
     let kw = this.keyWord
     console.log(kw);
     console.log(this.InfoList);
     let newarr = this.InfoList.filter((item)=>{
          return  item.jobName.indexOf(kw) !== -1
     })
     console.log(newarr);
     this.InfoList = newarr
    },
    // 根据多选条件查询数组
    conditionSearch(data){
      this.show = !this.show
     uni.request({
       url:'http://139.159.145.212:19001/power/wx/recruit/condition/listPage ',
       query:data,
       success:(res)=>{
         console.log(res);
         this.InfoList = res.data.rows
       }
     })
    }
  },
  onShow() {},
  onReachBottom() {
  if(!this.show){
    this.addFake()
    uni.showToast({
      title:'正在加载中，请稍等',
      icon:'loading'
    })
  }
  },
  onLoad() {
    // 获取首页的展示数据
    uni.request({
      url:'http://139.159.145.212:19001/power/wx/recruit/condition/listPage',
      success: res => {
        this.InfoList = res.data.rows
      }
    })
    // 获取筛选字段
    uni.request({
      url:'http://139.159.145.212:19001/power/wx/recruit/codition',
      success: res => {
        this.shiftList = res.data.data
      }
    })
  },
}
</script>


<style  scoped>
@import url("../../style/common.css");
.search-container {
  position: relative;
  padding-top: 20rpx;
  width: 100%;
  background-color: lightblue;
}
.search {
  margin: 0 20rpx 20rpx 20rpx;
}
.inp {
  background-color: #fff;
  border-radius: 30rpx;
  padding-left: 30rpx;
}
.shift {
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
}
.shift-left {
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 50rpx;
  border-right: 1px solid black;
}
.shift-right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
img {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
  margin-left: 5rpx;
}
.active {
  color: blue;
}
/* 抽屉动画 */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
